<template>
	<CommonHeader v-if="group" :title="group.name" :navs="navs" :func="func"
			:title-url="'/group/' + group.id"/>
</template>


<script type="module">
	import CommonHeader from '@/components/CommonHeader.vue';
	
	const groupNoticeUrl = (id) => `/group/${id}/notifications`;
	const groupMembersUrl = (id) => `/group/${id}/members`;
	const groupTasksUrl = (id) => `/group/${id}/tasks`;

	const menu = Object.freeze([
		{
			name: "go_home",
			url: "/",
			icon: "fa fa-home",
		},
	]);

	const getNavs = (groupId) => {
		return [
			{
				name: "notifications",
				target: groupNoticeUrl(groupId),
				visiable: true,
			},
			{
				name: "members",
				target: groupMembersUrl(groupId),
				visiable: true,
			},
			{
				name: "tasks",
				target: groupTasksUrl(groupId),
				visiable: true,
			},
		];
	};



	export default {
		name:'oj-group-header',
		inject: ['groupId', 'group'],
		data() {
			return {
				navs: null,
				func: menu,
			};
		},
		components: {
			CommonHeader,
		},
		created() {
			this.navs = getNavs(this.groupId);
		},
	} 
</script>